<template>
	<view v-if="isShowMore" :class="mode=='我的爱车'?'showMoreView1':'showMoreView'" :style="'top:'+ navigationBarHeight">
		<!-- #ifdef APP-PLUS||H5 -->
		<view v-if="mode=='我的爱车'" class="morebtn1" @click="$emit('shareAction')">
			<image class="moreImg" src="https://dnsverify.pfmoto.com/appstatic/car/car_edit_icon.png" />
			<view class="moreText"> 编辑信息</view>
		</view>

		<view v-else class="morebtn" @click="$emit('shareAction')">
			<image class="moreImg" src="https://dnsverify.pfmoto.com/appstatic/community/share.png" />
			<view class="moreText"> 分享</view>

		</view>

		<!-- #endif -->

		<view v-if="mode=='我的爱车'" class="morebtn1" @click="$emit('deleteAction')">
			<image class="moreImg" src="https://dnsverify.pfmoto.com/appstatic/img/my/my_del_icon.png" />
			<view class="moreText"> 删除车辆</view>
		</view>

		<view v-else class="morebtn" @click="$emit('deleteAction')">
			<image class="moreImg" src="https://dnsverify.pfmoto.com/appstatic/img/my/my_del_icon.png" />
			<view class="moreText"> 删除</view>
		</view>


	</view>






</template>

<script>
	const app = getApp();
	export default {
		name: "showMoreView",
		props: {
			isShowMore: {
				type: Boolean,
				default: false
			},
			mode: {
				type: String,
				default: ''
			},
		},
		data() {
			return {
				navigationBarHeight: app.globalData.statusBarHeight + 44 + 'px',
			};
		},
		methods: {

		},
		mounted() {
			uni.getSystemInfo({
				success: function(res) {
					// console.log(res, 'getSystemInfo');
					var navigationBarHeight = res.statusBarHeight + 44 + 'px'; //px
				}
			})
		},
	}
</script>

<style>
	.showMoreView {
		z-index: 10;
		position: fixed;
		/* top: 55px; */
		left: calc(100% - 120px);
		display: flex;
		flex-direction: column;
		/* #ifdef MP-WEIXIN */
		/* top: 90px; */
		left: 44px;
		/* #endif */
	}

	.showMoreView1 {
		z-index: 10;
		position: fixed;
		/* top: 55px; */
		left: calc(100% - 152px);
		display: flex;
		flex-direction: column;
		/* #ifdef MP-WEIXIN */
		/* top: 90px; */
		left: 44px;
		/* #endif */
	}

	.morebtn {
		display: flex;
		flex-direction: row;
		width: 108px;
		height: 46px;
		box-sizing: border-box;
		border-radius: 2px;
		text-align: center;
		line-height: 46px;
		align-items: center;
		justify-content: center;
		font-size: 14px;
		border: 1px solid #EDEDED;
		background-color: #EDEDED;
		margin: 2px;


	}

	.morebtn1 {
		display: flex;
		flex-direction: row;
		width: 140px;
		height: 46px;
		box-sizing: border-box;
		border-radius: 2px;
		text-align: center;
		line-height: 46px;
		align-items: center;
		justify-content: center;
		font-size: 14px;
		border: 1px solid #EDEDED;
		background-color: #EDEDED;
		margin: 2px;


	}

	.moreImg {
		width: 20px;
		height: 20px;
		margin-right: 8px;
	}

	.moreText {
		font-style: normal;
		font-weight: 400;
		font-size: 16px;
		line-height: 22px;
		display: flex;
		align-items: center;
		color: #3D3A3A;
	}
</style>
